<template>
	<view class="historical">
		<view class="current">
		</view>
		<view class="myTitle">
			<view class="returLeft"  @click="returnLeft">
				<u-icon name="arrow-left" class="" size="24" color="#fff"></u-icon>
			</view>
		</view>
		<view class="textName">
			历史项目
		</view>
		<view class="container">
			<view class="navTitle">
				<view class="navItem" v-for="(i ,index) in navTile" :key="index" :style="{color:(navIndex == index?'#47578E':'#979797')}" @click="getIndex(index)">
					{{i.name}}
					<view class="" style="height: 4rpx;width: 84rpx;margin: 8rpx auto 0rpx;" :style="{background:(navIndex == index?'#47578E':'#fff')}">
						
					</view>
				</view>
				
			</view>
			<view class="myList">
				<list  v-for="item in projectListData" :id = "item.id" :item = "item" :key="item.id" > 
				  <text slot="rightDetail"></text>
				  <text slot="timeValue"></text>
				  <text slot="update" @click="goAddprocess(item.id,item)">进度更新</text>
				  <text slot="topDetail"@click="goDetail(item.id,item)">查看详情</text>
				   <text slot="botTime"></text>
				  <text slot="topTime">{{item.upload_time.substring(0,10)}}</text>
				</list>
				<u-empty text="暂无列表哦~~" mode="list" v-if="projectListData.length==0" margin-top='50'></u-empty>
			</view>
		</view>
		<view class="noMore" v-if="last_page==form.page&&projectListData.length!=0"
			style="text-align: center;color: #797575;margin-top: 20rpx;padding-bottom: 60rpx;">
			数据加载完成...
		</view>
	</view>
</template>

<script>
	import {
		historyProjectList,
	} from '@/request/api.js'
	import list from '@/components/common/list.vue'
	export default {
		components:{
			list
		},
		data() {
			return {
				navTile: [{
						name: '已暂停'
					},
					{
						name: '建设中'
					},
					{
						name: "开发中"
					}
				],
				navIndex: 0,
				form: {
					page: 1,
					status:'3', 
				},
				projectListData:[],
				last_page:1
			}
		},
		created() {
			
		},
		onShow() {
			this.projectListData = []
			this.form.page = 1
			this.projectList()
		},
		onLoad() {
			
		},
		onReachBottom() {
			if (this.form.page < this.last_page) {
				this.form.page = this.form.page + 1
				this.projectList()
			}
		},
		methods: {
			returnLeft(){
				uni.navigateBack()
			},
			getIndex(e){
				this.navIndex = e
				this.form.page = 1
				this.projectListData = []
				this.last_page = 1
				if(e == 0){
					this.form.status = 3 
				}else if(e == 1){
					 this.form.status = 2
				}else{
					this.form.status = 1
				}
				this.projectList()
			},
			goAddprocess(id,item){
				uni.navigateTo({
					url:`/my_pages/addProgcess/addProgcess?id=${id}&item=${JSON.stringify(item)}`
				})
			},
			goDetail(id,item){
				uni.navigateTo({
					url:`/pages/my/ProjectDetails/ProjectDetails?id=${id}&item=${JSON.stringify(item)}`
				})
			},
			async projectList() {
				let res = await historyProjectList(this.form)
				// this.projectListData = [...res.data.list, ...this.projectListData]
				this.projectListData = this.projectListData.concat(res.data.list)
				this.last_page = Math.ceil(res.data.total / 10)
				// console.log(this.projectListData)
			},
		}
	}
</script>

<style scoped lang="scss">
	.current {
		background: url(../../static/my/bg3.jpg);
		// background: url(../../static/selectBot.png);
		background-size: 100% 100%;
		height: 232px;
		background-repeat: no-repeat;
		position: fixed;
		top: 0;
		overflow: hidden;
		left: 0;
		width: 100%;
		z-index: 0;
	}
	.myTitle {
		.returLeft {
			top: 58px;
			left: 40rpx;
			position: fixed;
			width: 100rpx;
			color: #fff !important;
			z-index: 9999999;
		}
	}
	.textName{
		top: 56px;
		left: 41%;
		position: fixed;
		width: 150rpx;
		color: #fff;
		font-size: 36rpx;
		z-index: 9999999;
	}
	.historical {
		font-size: 28rpx;
		.navTitle {
			    display: flex;
			    align-items: center;
			    justify-content: center;
			    color: #979797;
			    padding: 20rpx 0 12rpx;
				position: relative;
				width: 94%;
				border-radius: 20rpx;
				background: #fff;
				margin: 0 auto;
				margin-top: 190rpx;
				box-sizing: border-box;
				border: 1px solid gainsboro;
		}
		.navItem{
			width: 33.33%;
			text-align: center;
		}
		.myList{
			position: relative;
		}
	}
</style>
<style>
	page {
		background-color: #f6f6f6;
	}
</style>
